Full-page preview

D-D0b Preview Page

Eigene Full-Page-Vorschau fuer App-Shell-Breite, Page Padding, Card Padding und Grid-Gaps. Diese Seite ist bewusst von der D-Entscheidungsseite getrennt.

Zurueck zu D02
App Shell
Layout-Dichte
Hilfen
Aktive Layout-Daten Diese Werte aendern sich durch die Umschalter.
ShellAn
Sidebar232px
Topbar56px sichtbar
Content-BreiteViewport minus 232px
BewertungProduktansicht
ShellAus
Sidebar0px
Topbarausgeblendet
Content-Breitevolle Preview-Breite
BewertungCanvas/Modal-Kontext
ModusAdmin Standard
Page Padding24px
Card Padding16px
Grid/Card Gap16px
Detail-/Editor Padding16px
ModusKompakt
Page Padding24px min
Card Padding16px
Grid/Card Gap12px
Detail-/Editor Padding16px
ModusDialog 32px
Page Padding24px
Card Padding16px
Grid/Card Gap16px
Dialog Padding32px Variante
Layout-Standards

Klick springt zur Regel auf der D-D0b-Entscheidungsseite. Die Badges in der Preview zeigen, wo die Regel im Beispiel angewendet wird.

D01 Grundraster Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. D02 Page/Card/Grid Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px. D03 Text-Rhythmus 0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen. D04 Button Ownership Button Default/Medium/36px; Button-Padding kommt aus der Komponente. D05 Forms Komplette Field-Komponenten stehen standardmaessig 16px auseinander. D06 Table Ownership Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz. D07 Dialog Sizes XS 420, S 560, M 720, L 1200; Fullscreen max 2512px. D08 Dialog Internal Gaps Title 8px, Field 16px, Section 24px, Footer Button 8px. D09 States Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale.
New Export
D02 Page Padding
D03 Text-Rhythmus

Workspace overview

Operations dashboard

Beispielseite fuer App-Shell-Breite, Page Padding, Card-Padding und Grid-Gaps im laufenden Produktkontext.

D04 Buttons Filter Create task
D02 Grid Gap
D02 Card Padding

Open leads

128

+12 this week

Active projects

42

8 need review

Team workload

76%

Balanced

Pending approvals

9

3 overdue

D02 Card

Recent work

Tasks, customers and approvals in one dense page area.

Review onboarding workspace Assigned to Admin Team
Due today
Prepare customer import CRM setup
Active
Approve role changes Security settings
Review
D06 Table

Employee access

Table area for judging page width inside and outside the shell.

Role
Name Role Department Status Actions
David Bertram Admin Operations Active ...
Anna Keller Finance Lead Finance Active ...
Max Hoffmann Employee Support Pending ...
D07/D08 Dialog

Dialog 32px Variante

Dieser Modus macht nur diese grosse Arbeitsflaeche innen groesser. Das steht fuer die groessere Subframe-Dialog-Variante, nicht fuer frei gesetztes Padding auf normalen Surfaces.

Role Contacts Projects Reports
D05 Field Gap